<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几种不同的文字效果</title>
    <style>
        p{
            font-size: 24px;
        }

        /* 凸文字 */
        p:nth-child(1){
            /* 较浅的背景 */
            background-color: hsl(210, 13%, 60%);
            /* 同色系较深文字 */
            color: hsl(210, 13%, 30%);
            /* 浅色投影更佳 */
            text-shadow: 0 1px 1px hsla(0, 0%, 100%, .8);
        }

        /* 凹文字 */
        p:nth-child(2){
            /* 较深的背景 */
            background-color: hsl(210, 13%, 40%);
            /* 同色系较浅文字 */
            color: hsl(210, 13%, 75%);
            /* 深色投影更佳 */
            text-shadow: 0 -.03em .03em black;
        }

        /* 空心字 */
        p:nth-child(3){
            /* 较深的背景 */
            background-color: hsl(189, 52%, 71%);
            /* 同色系较浅文字 */
            color: hsl(0, 0%, 100%);
            /* 深色投影更佳 */
            text-shadow: 2px 2px black, -2px -2px black,
                         2px -2px black, -2px 2px black;
            /* 采用添加四个方向的投影，当像素较大时效果不佳,可以考虑svg */
        }

        /* 发光文字1 */
        p:nth-child(4){
            background-color: #203;
            color: transparent;
            transition: 1s;
        }
        p:nth-child(4):hover{
            color: #ffc;
            text-shadow: 0 0 .1em, 0 0 .3em;
        }

        /* 发光文字2 */
        p:nth-child(5){
            background-color: #203;
            color: #ffc;
            filter: blur(.1em);
            transition: 1s;
        }
        p:nth-child(5):hover{
            filter: none;
        }

        /* 投影文字 */
        P:nth-child(6){
            font-size: 36px;
            background: #58a;
            color: white;
            text-shadow: 0 1px hsl(0, 0%, 85%),
                         0 2px hsl(0, 0%, 80%),
                         0 3px hsl(0, 0%, 75%),
                         0 4px hsl(0, 0%, 70%),
                         0 5px hsl(0, 0%, 65%),
                         0 5px 10px black;
        }
    </style>
</head>
<body>
    <p>The only way to get rid of a temptation is to yield to it.</p>
    <p>The only way to get rid of a temptation is to yield to it.</p>
    <p>The only way to get rid of a temptation is to yield to it.</p>
    <p>The only way to get rid of a temptation is to yield to it.</p>
    <p>The only way to get rid of a temptation is to yield to it.</p>
    <p>CSS3D</p>
</body>
</html>